<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" ref="formRef" :rules="rules" :model="form" label-width="200px" label-position="left" class="form-readonly">
      <el-form-item :label="$t('pageStr.enablePowerAlarmStr')">
        <el-switch v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="form.enabled === '1'">
        <el-form-item :label="$t('pageStr.alarmProtocolStr')" prop="mode" style="max-width: 500px">
          <el-select v-model="form.mode" clearable class="w-full">
            <el-option v-for="item of warningCycle" :label="item" :value="item.toLowerCase()"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('pageStr.alarmServerIPAddrStr')" prop="ip" style="max-width: 500px">
          <el-input v-model="form.ip" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.alarmServerPortStr')" prop="port" style="max-width: 500px">
          <el-input v-model="form.port" type="number" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.alarmContentStr')" prop="data" style="max-width: 500px">
          <el-input v-model="form.data" clearable/>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;color: #fff" color="#C29B74" @click="handleSubmit">{{ $t('tabsStr.applyStr') }}</el-button>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import {reqGetPowerAlarm, reqSetPowerAlarm} from '@/api/application/power-alarm'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import { permissionDisabled } from '@/utils'

const {t} = useI18n()
const rules = {
  mode: [{ required: true, message: t('emptyTip'), trigger: 'blur' }],
  ip: [{ required: true, message: t('emptyTip'), trigger: 'blur' }],
  port: [{ required: true, message: t('emptyTip'), trigger: 'blur' }],
  data: [{ required: true, message: t('emptyTip'), trigger: 'blur' }],
}
const formRef = ref(null)
const form = ref({
  community: '',
  data: '',
  data_type: '',
  enabled: '',
  ip: '',
  mode:'',
  oid_trap:'',
  port: '',
})

onBeforeMount(getData)

function getData() {
  reqGetPowerAlarm().then((res) => {
    form.value = res.powerAlarm
    console.log('读取掉电告警', form.value)
  })
}

function handleSubmit() {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    console.log('设置掉电告警', form.value)
    reqSetPowerAlarm(form.value).then(() => {
      ElMessage.success(t('successTip'))
    }).catch(() => {
      ElMessage.error(t('errorTip'))
    })
  })
}
const warningCycle = ['UDP', 'SNMP']

</script>

<style scoped>
</style>